<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  level?: string,
}
const props = withDefaults(defineProps<Props>(), {
  level: () => '',
});
type Emit = {
  (e: 'update:level', value: string): void,
}
const emit = defineEmits<Emit>();

onMounted(() => {
  emit('update:level', Enums.ActionLevel.All);
});

const onSelectorChange = (value: string) => {
  emit('update:level', value);
};
</script>

<template>
  <ElSelect
    :model-value="props.level"
    class="action-level-selector"
    filterable
    @change="onSelectorChange"
  >
    <ElOption
      v-for="level in Enums.ActionLevel"
      :key="level"
      :value="level"
      :label="t(`actionLevel.${level}`)"
    />
  </ElSelect>
</template>

<i18n lang="yaml" locale="zh-CN">
  actionLevel:
    all: '全部等级'
    高危: '高危'
    中危: '中危'
    低危: '低危'
</i18n>
<i18n lang="yaml" locale="en-US">
  actionLevel:
    all: 'All Action Levels'
    高危: 'High'
    中危: 'Middle'
    低危: 'Low'
</i18n>

<style lang="scss" scoped>
.selector {
  width: 120px;
}
</style>
